<template>
  <div class="zhzx-right-bottom d-flex-c overflow-hidden">
    <div class="panel-header-bg flex-between flex-0">
      <div class="title-text">
        站网情况
      </div>
      <span class="c-text-blue f-12">截至当前</span>
    </div>
    <div
      class="panel-zone-big-bg right-top flex-between flex-1"
    >
      <div
        class="panel-zone-bg half-width m-r-mini d-flex-c full-height no-padding"
      >
        <div class="flex-between ai-c m-b-tiny p-h-8 p-t-6">
          <div class="little-title">
            站网概览
            <span class="unit-text">（个）</span>
          </div>
          <div
            class="flex-ai-c c-pointer"
            @click="openZWGLDetail('')"
          >
            <span
              class="f-14 c-white"
              style="margin-right: 18px;"
            > 总数</span>
            <span class="c-text-blue ff-agencyyr f-24 f-w7">{{ stationNetworkInfo.total }}</span>
          </div>
        </div>
        <div class="overflow-auto scroll-box p-h-8">
          <div
            class="station-progress d-flex-c "
            v-for="(p,index) in stationProgresss"
            :key="index"
          >
            <div
              class="flex-between c-white progress-title"
            >
              <span
                class="f-14 c-pointer"
                @click="openZWGLDetail(p.type)"
              >{{ p.label }}</span>
              <span
                @click="openZWGLDetail(p.type)"
                class="f-18 ff-agencyyr f-w7 c-pointer"
              >{{ stationNetworkInfo[p.field] }}</span>
            </div>
            <el-progress
              :percentage="handleStationPercentage(p.field)"
              color="#2681D9"
              define-back-color="#224972"
              :show-text="false"
              :stroke-width="8"
              @click.native="openZWGLDetail(p.type)"
              class="c-pointer"
            />
          </div>
        </div>
      </div>
      <EquRunningStatus />
    </div>
    <DetailModal
      v-if="zwglDetailVisible"
      :visible="zwglDetailVisible"
      :columns="columns"
      :load-function="getDetailData"
      @close="zwglDetailVisible=false"
    />
  </div>
</template>

<script>
import EquRunningStatus from '../../components/business/equ-running-status.vue'
import DetailModal from '../../components/modal/detail-modal.vue'
const czMap = {
  ZQ: '水文站',
  ZZ: '水位站',
  PP: '降水站',
  SS: '墒情站',
  AA: '辅助站',
  XX: '基本断面',
  气象: '气象',
  汛期: '汛期'
}
export default {
  name: 'ZhzxRightBottom',
  components: { EquRunningStatus, DetailModal },
  data () {
    return {
      stationProgresss: [
      ],
      stationNetworkInfo: {},
      zwglDetailVisible: false,
      columns: [
        { title: '测站名称', field: 'stnm', minWidth: 120 },
        { title: '站码', field: 'stcd', width: 100 },
        { title: '站类', field: 'sttp', width: 100 },
        { title: '经度', field: 'lgtd', width: 140 },
        { title: '纬度', field: 'lttd', width: 140 },
        { title: '所属行政区', field: 'addvnm', width: 120 },
        { title: '站址', field: 'stlc', minWidth: 180, align: 'left' }
      ],
      detailType: ''
    }
  },
  computed: {

  },
  created () {
    this.getZWGLData()
  },
  methods: {
    async getZWGLData () {
      const data = await this.$request.formDataPost(window.outApiZw + 'dev-api/stsc/swZwStscinfoA/count', { groupType: 'sttp' }, false, 'POST', true)
      const keys = Object.keys(data)
      let total = 0
      for (let i = 0; i < keys.length; i++) {
        this.stationProgresss.push({ label: czMap[keys[i]], field: 'f' + i, type: keys[i] })
        const value = Number(data[keys[i]])
        if (!isNaN(value)) {
          total = total + value
          this.stationNetworkInfo['f' + i] = value
        } else {
          this.stationNetworkInfo['f' + i] = 0
        }
      }
      this.stationProgresss = this.stationProgresss.sort((a, b) => {
        return this.stationNetworkInfo[b.field] - this.stationNetworkInfo[a.field]
      })
      this.stationNetworkInfo.total = total
    },
    handleStationPercentage (field) {
      if (!field || !this.stationNetworkInfo.total) return 0
      return (this.stationNetworkInfo[field] / this.stationNetworkInfo.total) * 100
    },
    async openZWGLDetail (type) {
      this.detailType = type
      this.zwglDetailVisible = true
    },
    async getDetailData () {
      let data = await this.$request.formDataPost(window.outApiZw + 'dev-api/stsc/swZwStscinfoA/count', { groupType: 'stcd' }, false, 'POST', true)
      if (this.detailType) {
        data = data.filter(c => c.sttp === this.detailType)
      }
      data = data.map(item => { return { ...item, sttp: czMap[item.sttp] } })

      return data
    }
  }
}
</script>

<style lang="scss" scoped>
.zhzx-right-bottom {
  flex-grow: 1;
  min-height: 261px;
  max-height: 293px;

  .panel-zone-big-bg {
    max-height: 247px;
  }
}

.unit-text {
  font-size: 12px;
  font-family: "Microsoft YaHei", "Microsoft YaHei-Regular", serif;
  color: #dbeffd;
}

::v-deep.station-progress {
  margin-bottom: 12px;

  .progress-title {
    line-height: 16px;
    margin-bottom: 9px;
  }

  .el-progress .el-progress-bar__outer {
    background-color: #224972;
  }
}

.scroll-box {
  height: calc(100% - 28px);
}
</style>
